import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet } from 'react-native'
import { ScaleS, ScaleT, WIDTH } from 'src/utils/ScreenUtil'
import { getSettlementMethod, unitList } from 'src/utils/ConfigUtil'
import JobType from 'src/components/job-type'


export default class JobBasicInfo extends React.PureComponent {
  constructor(props) {
    super(props)
    this.basicInfo = props.data
    this.settlementMethodObj = this.basicInfo ? (this.basicInfo.type == 0 ? { unit: `元/${unitList[this.basicInfo.unit !== '' && this.basicInfo.unit !== undefined ? this.basicInfo.unit : this.basicInfo.settlementMethod * 1 + 1]}` } : getSettlementMethod(this.basicInfo.settlementMethod)) : {}
  }

  static propTypes = {
    data: PropTypes.object
  }

  render() {
    const { data: basicInfo } = this.props
    return (
      <View style={styles.cell}>
        <View style={styles.view1}>
          <Text style={styles.name}>{basicInfo.name}</Text>
          <JobType type={this._getType(basicInfo)} isFast={parseInt(basicInfo.isFast)} />
        </View>
        <View style={styles.view2}>
          <Text style={styles.price}>
            {basicInfo.salary}
          </Text>
          <Text style={styles.unit}>
            {this.settlementMethodObj.unit}
          </Text>
        </View>
        <View style={styles.view3}>
          <View style={styles.view3Left}>
            {!!basicInfo.areaNames && basicInfo.areaNames.map((item, index) => {
              if (item) {
                return <View style={styles.tagView} key={index}>
                  <Text style={styles.tagText}>{item}</Text>
                </View>
              } else {
                return null
              }
            })
            }
            {!!this.settlementMethodObj.short &&
              <View style={styles.tagView}><Text style={styles.tagText}>{this.settlementMethodObj.short}</Text></View>}
            <View style={styles.tagView}><Text style={styles.tagText}>{basicInfo.category}</Text></View>
          </View>
          {/* todo 面试状态 */}
          {!!basicInfo.interviewState && <Text style={styles.bottomRight}>已面试</Text>}
        </View>
      </View>
    )
  }

  _getType = (basicInfo) => {
    if (basicInfo.practiceLabel === 1) {
      return 2
    }
    return basicInfo.type
  }
}

const styles = StyleSheet.create({
  cell: {
    flex: 1,
    width: WIDTH - ScaleS(40),
    marginTop: ScaleS(30),
    marginHorizontal: ScaleS(20)
  },

  view1: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  name: {
    fontSize: ScaleT(24),
    fontWeight: '600',
    color: '#000000',
    lineHeight: ScaleS(35),
    height: ScaleS(35)
  },
  tagImg: {
    marginLeft: ScaleS(4),
    width: ScaleS(18),
    height: ScaleS(21),
    resizeMode: 'cover'
  },
  view2: {
    marginTop: ScaleS(8),
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  price: {
    marginRight: ScaleS(3),
    height: ScaleS(28),
    fontSize: ScaleT(24),
    fontWeight: 'bold',
    color: '#FFC61C',
    lineHeight: ScaleS(28)
  },
  unit: {
    marginTop: ScaleS(9),
    height: ScaleS(17),
    fontSize: ScaleT(12),
    fontWeight: '500',
    color: '#444444',
    lineHeight: ScaleS(17)
  },
  view3: {
    marginTop: ScaleS(14),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  view3Left: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-start',
    flexWrap: 'wrap'
  },
  tagView: {
    marginRight: ScaleS(15),
    paddingHorizontal: ScaleS(16),
    height: ScaleS(28),
    backgroundColor: 'rgba(216,216,216,0.205)',
    borderRadius: ScaleS(14)
  },
  tagText: {
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#999999',
    lineHeight: ScaleS(28)
  },
  view3Right: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#444444',
    lineHeight: ScaleS(28)
  }
})
